import { useState, useEffect } from 'react'

const App = () => {
  const [count, setCount] = useState(0)
  // useEffect的依赖项
  useEffect(() => {
    console.log('副作用')
    document.title = `计数器：${count}`
  }, [])
  // 不要对依赖项撒谎，副作用中使用了那些数据，就需要出现在依赖项当作

  const [loading, setLoading] = useState(false)


  return (
    <div className="app">
      App组件
      <hr />
      <div>
        <p>计数器：{count}</p>
        <button onClick={() => setCount(count + 1)}>+1</button>
        <p>{loading ? '加载中...' : '加载完毕'}</p>
        <button onClick={() => setLoading(!loading)}>修改loading</button>
      </div>
    </div>
  )
}

export default App